* {
  padding: 0;
  margin: 0; }

body, html {
  height: 100%;
  overflow: hidden;
  background: #333; }

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.animate-box {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 110px;
          flex: 0 0 110px;
  margin: 50px auto; }

.square-flip {
  width: 40px;
  height: 40px; }
  .square-flip-el {
    width: 100%;
    height: 100%;
    background: deepskyblue;
    -webkit-animation: flip 1s infinite ease-out;
            animation: flip 1s infinite ease-out; }

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(240) rotateX(0) rotateY(0);
            transform: perspective(240) rotateX(0) rotateY(0); }
  50% {
    -webkit-transform: perspective(240) rotateX(-180deg) rotateY(0);
            transform: perspective(240) rotateX(-180deg) rotateY(0); }
  100% {
    -webkit-transform: perspective(240) rotateX(-180deg) rotateY(-180deg);
            transform: perspective(240) rotateX(-180deg) rotateY(-180deg); } }

@keyframes flip {
  0% {
    -webkit-transform: perspective(240) rotateX(0) rotateY(0);
            transform: perspective(240) rotateX(0) rotateY(0); }
  50% {
    -webkit-transform: perspective(240) rotateX(-180deg) rotateY(0);
            transform: perspective(240) rotateX(-180deg) rotateY(0); }
  100% {
    -webkit-transform: perspective(240) rotateX(-180deg) rotateY(-180deg);
            transform: perspective(240) rotateX(-180deg) rotateY(-180deg); } }
.circle-scale {
  position: relative;
  width: 40px;
  height: 40px; }
  .circle-scale-el {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    background: deepskyblue;
    -webkit-animation: circle-scale 1s infinite ease-in-out;
            animation: circle-scale 1s infinite ease-in-out; }
    .circle-scale-el:last-child {
      -webkit-animation-delay: -0.5s;
              animation-delay: -0.5s; }

@-webkit-keyframes circle-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    opacity: 0.5;
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0); } }

@keyframes circle-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    opacity: 0.5;
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0); } }
.wave-el {
  display: inline-block;
  width: 4px;
  height: 40px;
  background: deepskyblue;
  -webkit-transform: scaleY(0.4);
          transform: scaleY(0.4);
  -webkit-animation: wave 1s infinite ease-in-out;
          animation: wave 1s infinite ease-in-out; }
  .wave-el:nth-of-type(1) {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; }
  .wave-el:nth-of-type(2) {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; }
  .wave-el:nth-of-type(3) {
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s; }
  .wave-el:nth-of-type(4) {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; }
  .wave-el:nth-of-type(5) {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s; }

@-webkit-keyframes wave {
  0% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); }
  40%,60%,80%,100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); } }

@keyframes wave {
  0% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); }
  40%,60%,80%,100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); } }
.square-move {
  position: relative;
  width: 40px;
  height: 40px; }
  .square-move-el {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    background: deepskyblue;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation: square-move 1.2s infinite ease-in-out;
            animation: square-move 1.2s infinite ease-in-out; }
    .square-move-el:last-child {
      -webkit-animation-delay: -0.6s;
              animation-delay: -0.6s; }

@-webkit-keyframes square-move {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  25% {
    -webkit-transform: translateX(30px) scale(0.5) rotate(90deg);
            transform: translateX(30px) scale(0.5) rotate(90deg); }
  49% {
    -webkit-transform: translateX(30px) translateY(30px) scale(1) rotate(179deg);
            transform: translateX(30px) translateY(30px) scale(1) rotate(179deg); }
  50% {
    -webkit-transform: translateX(30px) translateY(30px) scale(1) rotate(180deg);
            transform: translateX(30px) translateY(30px) scale(1) rotate(180deg); }
  75% {
    -webkit-transform: translateX(0px) translateY(30px) scale(0.5) rotate(270deg);
            transform: translateX(0px) translateY(30px) scale(0.5) rotate(270deg); }
  100% {
    -webkit-transform: translateX(0px) translateY(0px) scale(1) rotate(360deg);
            transform: translateX(0px) translateY(0px) scale(1) rotate(360deg); } }

@keyframes square-move {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  25% {
    -webkit-transform: translateX(30px) scale(0.5) rotate(90deg);
            transform: translateX(30px) scale(0.5) rotate(90deg); }
  49% {
    -webkit-transform: translateX(30px) translateY(30px) scale(1) rotate(179deg);
            transform: translateX(30px) translateY(30px) scale(1) rotate(179deg); }
  50% {
    -webkit-transform: translateX(30px) translateY(30px) scale(1) rotate(180deg);
            transform: translateX(30px) translateY(30px) scale(1) rotate(180deg); }
  75% {
    -webkit-transform: translateX(0px) translateY(30px) scale(0.5) rotate(270deg);
            transform: translateX(0px) translateY(30px) scale(0.5) rotate(270deg); }
  100% {
    -webkit-transform: translateX(0px) translateY(0px) scale(1) rotate(360deg);
            transform: translateX(0px) translateY(0px) scale(1) rotate(360deg); } }
.fadeout {
  width: 40px;
  height: 40px; }
  .fadeout-el {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: deepskyblue;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation: fadeout 1s infinite ease-in-out;
            animation: fadeout 1s infinite ease-in-out; }

@-webkit-keyframes fadeout {
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes fadeout {
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }
.circle-spin {
  width: 40px;
  height: 40px;
  -webkit-animation: circle-spin 2s infinite linear;
          animation: circle-spin 2s infinite linear; }
  .circle-spin-el {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: deepskyblue;
    -webkit-animation: circle-spin-scale 2s infinite linear;
            animation: circle-spin-scale 2s infinite linear; }
    .circle-spin-el:last-child {
      -webkit-animation-delay: -1s;
              animation-delay: -1s; }

@-webkit-keyframes circle-spin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes circle-spin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
@-webkit-keyframes circle-spin-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0); } }
@keyframes circle-spin-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0); } }
